<html>
<head>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="webix.css"/> 
	<script type="text/javascript" src="webix.js"></script> 
	<style>
	.srodape{
		background-color: #666	;
	}
	</style>
</head>

<body>
	<div id="cont"></div>
	<script>
	var logado = false;

	function login(){
		if(logado){
			var cond = confirm("Você deseja sair do sistema?");
			if(cond){
				logado = false;
				$$('menulst').hide();
				$$('login').show();
				$$('logoff').hide();	
			}
		}else{
			var user = $$('login').getValues().usuario;
			var pass = $$('login').getValues().senha;
			
			if(user === "danilo" && pass === "123"){
				alert("Seja bem vindo, " + user);
				logado = true;
				$$('menulst').show();
				$$('login').hide();
				$$('logoff').show();
			}else{
				alert("Nome ou senha inválido. Redigite!");
			}	
		}
	}

	webix.ui({
		rows:[
		{
			type: "header",
			template: "Nome da Empresa",
		},
		{
			cols:[
			{
				width: 200,
				minWidth:200,
				maxWidth:250,
				rows:[
				{
					//JSON responsável pelo Menu
					id:"menulst",
					view: "list",
					scroll: false,
					hidden:true,
					template: "#opcao#",
					select:true,
					height: 240,
					data:[
					{ id:1, opcao:"Cadastro" },
					{ id:2, opcao:"Financeiro" },
					{ id:3, opcao:"Loja" },
					{ id:4, opcao:"Automação" },
					{ id:5, opcao:"Técnica" },
					{ id:6, opcao:"Faturamento" },
					{ id:7, opcao:"Gerencial" },
					]
				},
				{
					id:"login",
					view: "form",
					width:200,
					elements:[
					{ name:"usuario", view: "text", placeholder: "Nome"},
					{ name:"senha",view: "text", placeholder: "Senha"},
					{ view: "button", value: "Entrar", click:"login"}
					]
				},
				{
					id:"logoff",
					view: "form",
					hidden:true,
					width:200,
					elements:[
					{ view: "button", value: "Sair", click:"login"}
					]
				}
				]
			},
			{ view: "resizer" },
			{
				template: "<h1>Seja bem vindo!</h1><h2>Por favor, efetue o login</h2>",
				minHeight:550,
			},
			{
				rows:[
				{
					weekHeader: true,
					date: new Date(),
					view:"calendar",
					width: 250,
					height: 250,
					events:webix.Date.isHoliday
				},
				{
					template: "ola mundo"
				}
				]
			}

			]
		},
		{
			css:"srodape",
			template: "rodape"
		}
		]
	});
</script>
</body>
</html>